

export function getTabsHTML(printObj){

  return  `
  <div id="printTabs" class="_tab_container">
		<div class="_tab_title_wrapper ">
			<div class="_tab_title" name='页面'>📄页面</div>
			<div class="_tab_title _tab_active_title" name='页边距'>📏页边距</div>
			<div class="_tab_title" name="分页">📑分页</div>
		</div>
		<div class="_tab_content_wrapper">
			<div class="_tab_content " name='页面'>
				打印比例：<input min="0" id="printScaleInput" type="number" class="_print_iput" 
					value="${printObj?.paper?.scale ?? 100}">%
			</div>
			<div class="_tab_content _tab_active_content" name='页边距'>
				<div>单位：毫米</div>
				<div>
					<div class="_print_bottom_top_padding">上边距：<input type="number"
					 value="${printObj?.paper?.top ?? 25}"
							class="_print_iput _print_padding_input" name="上边距"></div>
				</div>
				<div style="display: flex;align-items: center;justify-content: space-between;height: 210px;">
					<div>
						左边距：<input type="number" value="${printObj?.paper?.left ?? 19}" class="_print_iput _print_padding_input" name="左边距">
					</div>
					<div style="flex: 1;">
						<div style="width: 150px;height: 200px;margin: auto;">
							<!-- 九宫格 -->
							<div class="_print_grid_container" id="printGridContainer">
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item" 
                style="align-items:flex-start;justify-content:flex-start;overflow:hidden;">
                  <svg width="100" height="150" viewBox="0 0 220 330" xmlns="http://www.w3.org/2000/svg"><defs><style>.grid rect { fill: none; stroke: #676768; stroke-width: 2; }</style></defs><g class="grid"><rect x="0" y="0" width="50" height="50" /><rect x="50" y="0" width="50" height="50" /><rect x="100" y="0" width="50" height="50" /><rect x="150" y="0" width="50" height="50" /><rect x="0" y="50" width="50" height="50" /><rect x="50" y="50" width="50" height="50" /><rect x="100" y="50" width="50" height="50" /><rect x="150" y="50" width="50" height="50" /><rect x="0" y="100" width="50" height="50" /><rect x="50" y="100" width="50" height="50" /><rect x="100" y="100" width="50" height="50" /><rect x="150" y="100" width="50" height="50" /><rect x="0" y="150" width="50" height="50" /><rect x="50" y="150" width="50" height="50" /><rect x="100" y="150" width="50" height="50" /><rect x="150" y="150" width="50" height="50" /><rect x="0" y="200" width="50" height="50" /><rect x="50" y="200" width="50" height="50" /><rect x="100" y="200" width="50" height="50" /><rect x="150" y="200" width="50" height="50" /><rect x="0" y="250" width="50" height="50" /><rect x="50" y="250" width="50" height="50" /><rect x="100" y="250" width="50" height="50" /><rect x="150" y="250" width="50" height="50" /></g></svg>
                </div>
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item"></div>
								<div class="_print_grid_item"></div>
							</div>

						</div>
					</div>
					<div>
						右边距：<input type="number" value="${printObj?.paper?.right ?? 19}" class="_print_iput _print_padding_input" name="右边距">
					</div>
				</div>
				<div>
					<div class="_print_bottom_top_padding">下边距：<input type="number" value="${printObj?.paper?.bottom ?? 25}"
							class="_print_iput _print_padding_input" name="下边距"></div>
				</div>

			</div>
			<div class="_tab_content" name="分页">
				<div class="_print_fenye_container_item">
					<div class="_print_fenye_content_title">配置纵向分页</div>
					<div class="_print_fenye_content">
						<div style="display: flex;">
							<div class="_print_table_left">表头(标题)区：前</div><input name="headerRows" type="number" value="${printObj?.pageBreak?.headerRows ?? 0}" class="_print_iput">行
						</div>
						<div style="display: flex;">
							<div class="_print_table_left">表尾区：后</div><input name="footerRows" type="number" value="${printObj?.pageBreak?.footerRows ?? 0}" class="_print_iput">行
						</div>
						<div style="display: flex;">
							<div class="_print_table_left">报表第一页的左</div><input name="leftCols" type="number" value="${printObj?.pageBreak?.leftCols ?? 0}" class="_print_iput">列固定在每页
						</div>
						<div style="display: flex;">
							<div class="_print_table_left">报表第一页的右</div><input name="rightCols" type="number" value="${printObj?.pageBreak?.rightCols ?? 0}" class="_print_iput">列固定在每页
						</div>
					</div>
				</div>
				<div class="_print_fenye_container_item">
					<div class="_print_fenye_content_title">启用横向分页</div>
					<div class="_print_fenye_content">
						<div style="display: flex;">
							<div class="_print_table_left" style="width: 60px;">报表的左</div><input name="leftColsWhenLandscapePaging" type="number" value="${printObj?.pageBreak?.leftColsWhenLandscapePaging ?? 0}"
								class="_print_iput">列固定在页面的左边
						</div>
						<div style="display: flex;">
							<div class="_print_table_left" style="width: 60px;">报表的前</div><input name="FixedHeaderRowsAsLeftPage" type="number" value="${printObj?.pageBreak?.FixedHeaderRowsAsLeftPage ?? 0}"
								class="_print_iput">行采用和作业一样的表头
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  `
}


